<template>
  <div class="common-table-panel contentBox">
    <div class="gradient gradient1">
      <div class="search-header">
        <div class="left-search">
          <el-form
            ref="queryForm"
            :model="queryForm"
            :inline="true"
            class="search-form"
          >
            <el-form-item label="时间">
              <el-date-picker
                v-model="queryForm.date"
                type="daterange"
                range-separator="-"
                value-format="yyyyMMdd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @blur="dateBlur"
                @change="dateChange"
              />
            </el-form-item>
          </el-form>
        </div>
        <div class="right-btn">
          <el-button type="primary" class="btn" @click="onReset"
            >重置</el-button
          >
          <el-button type="primary" class="btn" @click="getData"
            >查询</el-button
          >
        </div>
      </div>
    </div>
    <div ref="gradient2" class="gradient">
      <div class="table-panel">
        <div
          ref="tableBody"
          class="table-body table-body-only"
          style="overflow-y: auto"
        >
          <ul class="table_ul">
            <li v-for="(item, index) in listData" :key="index" class="li_item">
              <div style="width: 100%">
                <el-collapse accordion>
                  <el-collapse-item>
                    <template slot="title">
                      <div class="msgContent">
                        <div class="imgBox">
                          <el-badge is-dot>
                            <i class="el-icon-message-solid" />
                          </el-badge>
                        </div>
                        <div class="textBox">
                          <div v-if="item.book == 'FI'">
                            FI、FI00账户持仓监控：当前持仓量{{
                              item.isExceed
                            }}，共有{{ item.bondLength }}只债券已超。
                          </div>
                          <div v-if="item.book == 'BU'">
                            BU00、BU01账户持仓量提醒：{{ item.bu001 }}
                          </div>
                          <div v-if="item.book == 'BU02'">
                            BU02当日持仓分析提醒：{{ item.message }}
                          </div>
                          <!-- <div>债券提醒：大赛分为房贷首付风格和儿童规范化个人风格不错v但是</div> -->
                        </div>
                      </div>
                    </template>
                    <div v-if="item.book == 'FI'">
                      持仓提醒：{{ item.holdStr }}
                    </div>
                    <div v-if="item.book == 'FI'">
                      债券提醒：{{ item.bondStr }}
                    </div>
                    <div v-if="item.book == 'BU'">
                      BU00提醒：{{ item.bu00 }}
                    </div>
                    <div v-if="item.book == 'BU'">
                      BU01提醒：{{ item.bu01 }}
                    </div>
                    <div v-if="item.book == 'BU02'">
                      BU02提醒：{{ item.message }}
                    </div>
                  </el-collapse-item>

                  <!-- <div class="msgContent">
                    <div class="imgBox">
                      <img class="li_img" src="@/assets/style/BELL.png" width="28">
                      <span class="li_img_info"></span>
                    </div>
                    <div>
                      <div>持仓提醒：梵蒂冈的风格如果对方风格和儿童</div>
                      <div>债券提醒：大赛分为房贷首付风格和儿童规范化个人风格不错v但是</div>
                    </div>
                  </div>-->
                </el-collapse>
                <div class="msgTime">时间：{{ time(item.dataDate) }}</div>
                <div class="name">已阅用户：{{ item.roleUser }}</div>
                <div class="name">类别：{{ item.book }}</div>
              </div>
              <!-- <div>{{item.dataDate}}</div> -->
            </li>
          </ul>
        </div>
        <div class="pagination" style="padding-bottom: 5px">
          <Pagination
            :total="total"
            :page.sync="page.page"
            :limit.sync="page.size"
            @pagination="getData"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import { mixin } from "@/utils/mixin.js";
import { findHomeMessage } from "@/api/sys/message.js";
import moment from "moment";
import { log } from "util";
export default {
  name: "",
  components: {
    Pagination,
  },
  mixins: [mixin],
  props: {},
  data() {
    return {
      page: {
        size: 50,
        page: 1,
      },
      total: 0,
      queryForm: {
        date: [
          moment(new Date() - 1 * 24 * 60 * 60 * 1000).format("yyyyMMDD"),
          moment(new Date()).format("yyyyMMDD"),
        ],
      },
      listData: [
        // {
        //   book: "FI",
        //   holdStr: "FI123",
        // },
        // {
        //   book: "BU",
        //   bu00: "BU123",
        // },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getData();
  },
  methods: {
    onReset() {},
    getData() {
      const params = {
        dataDateStr: this.queryForm.date[0],
        dataDateEnd: this.queryForm.date[1],
        page: this.page.page,
        rows: this.page.size,
      };
      findHomeMessage(params).then((res) => {
        // let str =
        // "当前FI持仓余额为0.7995亿元，当前FI00持仓余额为0.0000亿元，合计0.7995亿元，未超过限额。/21皖能源MTN001(碳中和债)债券，已持仓超过2天。21珠海港MTN003债券，已持仓超过60天。21中石集GN001债券，已持仓超过61天。21附息国债08债券，已持仓超过30天。21农发清发01债券，已持仓超过100天。21湖北科投MTN002债券，已持仓超过18天。21南投集团SCP002债券，已持仓超过2天。21国开05债券，已持仓超过86天。21苏国信MTN005债券，已持仓超过2天。21华能水电GN002债券，已持仓超过4天。21首旅MTN008债券，已持仓超过55天。21西基投MTN001债券，已持仓超过2天。21成兴国资PPN001债券，已持仓超过2天。21南州旅游MTN001债券，已持仓超过3天。";
        // let bondStr = str.substring(str.indexOf("/") + 1);
        // let bondLength = bondStr.split("。").length - 1;
        if (res.results.length != 0) {
          res.results.forEach((item) => {
            // item.message = str;
            if (item.book == "FI") {
              if (item.message.indexOf("/") != -1) {
                item.bondStr = item.message.substring(
                  item.message.indexOf("/") + 1
                );
                item.holdStr = item.message.substring(
                  0,
                  item.message.indexOf("/")
                );
                const arr = item.holdStr.split("，");
                item.isExceed = arr[arr.length - 1];
                item.bondLength = item.bondStr.split("。").length - 1;
              }
            } else if (item.book == "BU") {
              const arr = item.message.split("。");
              item.bu001 = arr[0];
              item.bu00 = arr[1];
              item.bu01 = arr[2];
            } else if (item.book == "BU02") {
            }
          });
          res.results.sort((a, b) => {
            return b.dataDate - a.dataDate;
          });
          this.listData = res.results;
          this.total = res.total;
        }
      });
    },
    time(str) {
      return moment(str).format("yyyy-MM-DD");
    },
  },
};
</script>

<style scoped lang="scss"></style>
